import React from "react";
import Header from "./component/Header";
import "./style/style.less";
import { apiGetShopIncomeChart,apiGetOfflineIncomeChart } from '@/request/dataStatics'
import _ from 'lodash'
import LineChart from "./component/LineChart";

class OnlineIncome extends React.Component {
  state = {
    lineXData: [],
    lineYData: [],
    searchValue: {
      type: 'day'
    },
    total:0,
    type:"日"
  }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    let value = this.props.isOnline
    this.setState({
      lineXData: [],
      lineYData: []
    })
    const { searchValue } = this.state
    switch (searchValue.type) {
      case "day":
        this.setState({
          type:"本日"
        })
        break;
      case "week":
        this.setState({
          type:"本周"
        })
        break;
      case "month":
        this.setState({
          type:"本月"
        })
        break;
      case "year":
        this.setState({
          type:"本年"
        })
        break;
      default:
        this.setState({
          type:"查询"
        })
        break;
    }
    let res = ''
    if(value==='online'){
      res = await apiGetShopIncomeChart({ ...searchValue })
    }
    if(value === 'offline'){
      res = await apiGetOfflineIncomeChart({ ...searchValue })
    }
    if (res.data && res.code === 0) {
      let lineXData = _.keys(res.data.bar)
      let total = 0
      let lineYData = _.values(res.data.bar).map(v => {
        total += v.sum*100
        console.log(v.sum);
        return v.sum
      })
      console.log(total);
      this.setState({
        lineXData,
        lineYData,
        total:(total/100).toFixed(2)
      })
    }
  }
  
  getTime = (type, createStartTime, createEndTime) => {
    if (type === 'condition') {
      this.setState({
        searchValue: {
          type: 'condition',
          createStartTime,
          createEndTime
        }
      }, () => this.getData())
    } else {
      this.setState({
        searchValue: {
          type
        }
      }, () => this.getData())
    }
  };
  render() {
    const { lineXData, lineYData , total,type} = this.state
    return <div className="p-layout-box">
    <Header getTime={this.getTime} />
    <div>{type}交易总额 {total>10000?(total/10000).toFixed(2)+"(万元)":total+"(元)"}</div>
    <div className="p-layout-content">
      <div className="chart-box">
        {!_.isEmpty(lineXData) && !_.isEmpty(lineYData) && <LineChart name="平台统计" lineXData={lineXData} lineYData={lineYData} />}
      </div>
    </div>
  </div>
    // <div className="p-layout-box">
    //   <Header getTime={this.getTime} />
    //   <div>{type}交易总额 {total>10000?(total/10000).toFixed(2)+"(万元)":total+"(元)"}</div>
    //   <div className="p-layout-content" style={this.props.style}>
    //     <div style={{ height: this.props.height || 'calc(100% - 10px)', width: this.props.width || 'calc(100% - 10px)' }}>
    //       {!_.isEmpty(lineXData) && !_.isEmpty(lineYData) && <LineChart name="平台统计" lineXData={lineXData} lineYData={lineYData} />}
    //     </div>
    //   </div>
    // </div>
  }
}

export default OnlineIncome;
